<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>react生命周期_旧</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			class Demo extends React.Component{
				//构造器 —— 只调用1次
				constructor(props){
					console.log('---constructor---')
					super(props)
					this.state = {sum:0}
				}

				//组件将要挂载 —— 只调用1次
				componentWillMount(){
					console.log('---componentWillMount---')
				}

				//初始化渲染调用、更新时调用，调用次数：1+n次
				render(){
					console.log('---render----')
					return (
						<div>
							<h2>当前求和为：{this.state.sum}</h2>	
							<button onClick={this.add}>+1</button>
							<button onClick={this.death}>卸载</button>
							<button onClick={this.force}>不修改任何的数据，就是想更新一下</button>
						</div>
					)
				}

				//组件挂载完毕 —— 只调用1次
				componentDidMount(){
					console.log('---componentDidMount---')
				}
				
				//组件即将卸载 —— 只调用1次
				componentWillUnmount(){
					console.log('---componentWillUnmount---')
				}

				//控制组件是否应该更新的钩子 —— n次，n是更新的次数
				//靠返回值控制是否更新：true可以更新，false不可以更新
				shouldComponentUpdate(){
					console.log('---shouldComponentUpdate---')
					return true
				}

				//组件将要更新 —— n次，n是更新的次数（前提：“阀门”要开启）
				componentWillUpdate(){
					console.log('---componentWillUpdate---')
				}

				//组件更新完成 —— n次，n是更新的次数（前提：“阀门”要开启）
				componentDidUpdate(){
					console.log('---componentDidUpdate---')
				}

				
				/* ****************下面都是事件的回调************************** */
				//点几次调几次
				add = ()=>{
					const {sum} = this.state
					this.setState({sum:sum+1})
				}
				//卸载组件
				death = ()=>{
					ReactDOM.unmountComponentAtNode(document.getElementById('root'))
				}
				force = ()=>{
					this.forceUpdate()
				}
			}
			ReactDOM.render(<Demo/>,document.getElementById('root'))
		</script>
	</body>
</html>